<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>What is Vuex? | Vuex</title>
    <meta name="description" content="Centralized State Management for Vue.js">
    <link rel="stylesheet" href="static/css/style.34a39eef.css">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/Home.8c77385a.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/vuex.7a49333f.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/app.a0c675ce.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/index.md.7af08570.lean.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/app.a0c675ce.js">
    <link rel="icon" href="https://vuex.vuejs.org/logo.png">
    <link rel="apple-touch-icon" href="https://vuex.vuejs.org/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="https://vuex.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="twitter:title" content="What is Vuex? | Vuex">
    <meta property="og:title" content="What is Vuex? | Vuex">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="javascript:;" aria-label="Vuex, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vuex</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index19.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">简体中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index20.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">日本語</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index21.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">Português</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index19.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">简体中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index20.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">日本語</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index21.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">Português</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="javascript:;">What is Vuex?</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">What is a &quot;State Management Pattern&quot;?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">When Should I Use It?</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Installation</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Getting Started</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Core Concepts</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">State</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Getters</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Mutations</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Actions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Modules</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Application Structure</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Composition API</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Plugins</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Strict Mode</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Form Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Hot Reloading</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">TypeScript Support</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Migration Guide</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Migrating to 4.0 from 3.x</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="what-is-vuex" tabindex="-1">What is Vuex? <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h1><div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>This is the docs for Vuex 4, which works with Vue 3. If you&#39;re looking for docs for Vuex 3, which works with Vue 2, <a href="javascript:;" target="_blank" rel="noopener noreferrer">please check it out here</a>.</p></div><p>Vuex is a <strong>state management pattern + library</strong> for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.</p><h2 id="what-is-a-state-management-pattern" tabindex="-1">What is a &quot;State Management Pattern&quot;? <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h2><p>Let&#39;s start with a simple Vue counter app:</p><div class="language-js"><pre><code><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// state</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// view</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
    &lt;div&gt;{{ count }}&lt;/div&gt;
  </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
  <span class="token comment">// actions</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token operator">++</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">createApp</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">)</span>
</code></pre></div><p>It is a self-contained app with the following parts:</p><ul><li>The <strong>state</strong>, the source of truth that drives our app;</li><li>The <strong>view</strong>, a declarative mapping of the <strong>state</strong>;</li><li>The <strong>actions</strong>, the possible ways the state could change in reaction to user inputs from the <strong>view</strong>.</li></ul><p>This is a simple representation of the concept of &quot;one-way data flow&quot;:</p><p style="text-align:center;margin:2em;"><img style="width:100%;max-width:450px;" src="static/picture/flow.png"></p><p>However, the simplicity quickly breaks down when we have <strong>multiple components that share a common state</strong>:</p><ul><li>Multiple views may depend on the same piece of state.</li><li>Actions from different views may need to mutate the same piece of state.</li></ul><p>For problem one, passing props can be tedious for deeply nested components, and simply doesn&#39;t work for sibling components. For problem two, we often find ourselves resorting to solutions such as reaching for direct parent/child instance references or trying to mutate and synchronize multiple copies of the state via events. Both of these patterns are brittle and quickly lead to unmaintainable code.</p><p>So why don&#39;t we extract the shared state out of the components, and manage it in a global singleton? With this, our component tree becomes a big &quot;view&quot;, and any component can access the state or trigger actions, no matter where they are in the tree!</p><p>By defining and separating the concepts involved in state management and enforcing rules that maintain independence between views and states, we give our code more structure and maintainability.</p><p>This is the basic idea behind Vuex, inspired by <a href="javascript:;" target="_blank" rel="noopener noreferrer">Flux</a>, <a href="javascript:;" target="_blank" rel="noopener noreferrer">Redux</a> and <a href="javascript:;" target="_blank" rel="noopener noreferrer">The Elm Architecture</a>. Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates.</p><p>If you want to learn Vuex in an interactive way you can check out this <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vuex course on Scrimba</a>, which gives you a mix of screencast and code playground that you can pause and play around with anytime.</p><p><img src="static/picture/vuex.png" alt="vuex"></p><h2 id="when-should-i-use-it" tabindex="-1">When Should I Use It? <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h2><p>Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It&#39;s a trade-off between short term and long term productivity.</p><p>If you&#39;ve never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That&#39;s perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple <a href="state-management1.html#simple-state-management-from-scratch" target="_blank" rel="noopener noreferrer">store pattern</a> may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There&#39;s a good quote from Dan Abramov, the author of Redux:</p><blockquote><p>Flux libraries are like glasses: you’ll know when you need them.</p></blockquote></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><p class="last-updated" data-v-fb8d84c6="" data-v-5797b537=""><span class="prefix" data-v-5797b537="">Last Updated:</span><span class="datetime" data-v-5797b537=""></span></p></div></footer><div class="next-and-prev-link" data-v-7eddb2c4="" data-v-38ede35f=""><div class="container" data-v-38ede35f=""><div class="prev" data-v-38ede35f=""><!----></div><div class="next" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><span class="text" data-v-38ede35f="">Installation</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f=""><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"4b45326e\",\"guide_actions.md\":\"9c977133\",\"guide_composition-api.md\":\"e01a428e\",\"guide_forms.md\":\"88f1ed54\",\"guide_getters.md\":\"2c5a0a0f\",\"guide_hot-reload.md\":\"c48e843e\",\"guide_index.md\":\"9dd21f7f\",\"guide_migrating-to-4-0-from-3-x.md\":\"66bd8cdf\",\"guide_modules.md\":\"95d32beb\",\"guide_mutations.md\":\"30cb1589\",\"guide_plugins.md\":\"a5e8be4d\",\"guide_state.md\":\"cfabbe36\",\"guide_strict.md\":\"9bdbc14d\",\"guide_structure.md\":\"0ac43d49\",\"guide_testing.md\":\"94c354a4\",\"guide_typescript-support.md\":\"946e4e74\",\"index.md\":\"7af08570\",\"installation.md\":\"71c4359e\",\"ja_api_index.md\":\"8ec02de7\",\"ja_guide_actions.md\":\"42d59860\",\"ja_guide_composition-api.md\":\"cf296415\",\"ja_guide_forms.md\":\"5c31ae2d\",\"ja_guide_getters.md\":\"a77b5c1e\",\"ja_guide_hot-reload.md\":\"4d14d06a\",\"ja_guide_index.md\":\"3a822b66\",\"ja_guide_migrating-to-4-0-from-3-x.md\":\"83fc993e\",\"ja_guide_modules.md\":\"bac522b8\",\"ja_guide_mutations.md\":\"9d14eba6\",\"ja_guide_plugins.md\":\"a729ddb7\",\"ja_guide_state.md\":\"6ac0e22d\",\"ja_guide_strict.md\":\"ca0af90e\",\"ja_guide_structure.md\":\"2ced329c\",\"ja_guide_testing.md\":\"246aa11b\",\"ja_guide_typescript-support.md\":\"95cb7cd9\",\"ja_index.md\":\"9e875040\",\"ja_installation.md\":\"f8883b0e\",\"ptbr_api_index.md\":\"c4a435dc\",\"ptbr_guide_actions.md\":\"4cd5afd8\",\"ptbr_guide_composition-api.md\":\"2de3cb0f\",\"ptbr_guide_forms.md\":\"d0a4a328\",\"ptbr_guide_getters.md\":\"0c62027a\",\"ptbr_guide_hot-reload.md\":\"edbb7f15\",\"ptbr_guide_index.md\":\"811fc38d\",\"ptbr_guide_migrating-to-4-0-from-3-x.md\":\"181af949\",\"ptbr_guide_modules.md\":\"035ca19f\",\"ptbr_guide_mutations.md\":\"a2194efe\",\"ptbr_guide_plugins.md\":\"ec68cab5\",\"ptbr_guide_state.md\":\"dbf6664a\",\"ptbr_guide_strict.md\":\"97901fcf\",\"ptbr_guide_structure.md\":\"493e0d23\",\"ptbr_guide_testing.md\":\"d9697706\",\"ptbr_guide_typescript-support.md\":\"d953d20b\",\"ptbr_index.md\":\"ce9751cf\",\"ptbr_installation.md\":\"fd9a58ca\",\"zh_api_index.md\":\"23227cff\",\"zh_guide_actions.md\":\"da25dd64\",\"zh_guide_composition-api.md\":\"9749c62a\",\"zh_guide_forms.md\":\"86e4b348\",\"zh_guide_getters.md\":\"d1f15af9\",\"zh_guide_hot-reload.md\":\"4832723a\",\"zh_guide_index.md\":\"6acb073d\",\"zh_guide_migrating-to-4-0-from-3-x.md\":\"9fad3617\",\"zh_guide_modules.md\":\"ce6036f0\",\"zh_guide_mutations.md\":\"2d3a9d53\",\"zh_guide_plugins.md\":\"8ab716ca\",\"zh_guide_state.md\":\"bacdc670\",\"zh_guide_strict.md\":\"99f28b75\",\"zh_guide_structure.md\":\"40f32e7f\",\"zh_guide_testing.md\":\"4d60bd56\",\"zh_guide_typescript-support.md\":\"a45beb7b\",\"zh_index.md\":\"a3d6a61d\",\"zh_installation.md\":\"14a19a2b\"}")</script>
    <script type="module" async="" src="static/js/app.a0c675ce.js"></script>
    
  </body>
</html>